<template>
	<view class="rootLog" :style="{marginTop:rootHeight}">
		<view class="dlBoxIco" style="margin-top:10vh"><image src="/static/lvyLogo.png"></image></view>
		<view class="dlWrap">
			<view class="dlInput_psd">
				<view class="dlInput_numb">
				<text>账号</text>
				<input 
				type="type" 
				placeholder="手机号/邮箱/账户登录" 
				placeholder-style="color:#CCCCCC"
				placeholder-class="placecLass"
				@input="focusClass1"
				:class="[isActive1 ? 'blueBorder' : '']"/>
				</view>
				<!-- <view><uni-icon type="arrowdown" size="20" color="#A7A7A7"></uni-icon></view> -->
			</view>
			<!-- 密码登录 -->
			<view class="dlInput_psd" v-if="islogYzm">
				<view class="dlInput_numb">
				<text>密码</text>
				<input 
				:type="!showPass?'password':'text'"  
				placeholder="请输入密码" 
				placeholder-style="color:#CCCCCC"
				placeholder-class="placecLass"
				@input="focusClass2"
				:class="[isActive2 ? 'blueBorder' : '']"/>
				
				</view>
				<uni-icon type="eye" style='float: right;margin-right: 30upx;padding: 20upx;' @click='showPassword()' size="20" :color="!showPass?'#999999':'#54AAFF'"></uni-icon>
			</view>
			<!-- 验证码登录-->
			<view class="yzmLog" v-else>
				<view>
				<input 
				type="text" 
				placeholder="请输入短信验证码" 
				placeholder-style="color:#CCCCCC"
				placeholder-class="placecLass"
				@input="focusClass2"
				:class="[isActive2 ? 'blueBorder' : '']"/>
				<!--  @tap="TimeBtn" -->
				<view class="getYzm" @click="TimeBtn"><text>{{countdown}}</text><text v-if="timeStatus">s</text></view>
				</view>
			</view>
			<view class="changeLoginType"><text @tap="switchLog">{{islogYzm ? '切换至验证码登陆' : '切换至密码登陆'}}</text></view>
			<view class="goIndex" @tap="goIndex">登陆</view>
			<view class="smallBtn">
				<view class="forPsd" @tap="forPsd">忘记密码</view>
				 <view class="goReg" @tap="goReg">
					 <text @tap="regId">注册账号</text>|
					 <text @tap="ask">遇到问题</text>
				</view>
			</view>
		</view>
		<view class="logTypeBotm">
			<image src="/static/loginQQ.png"></image>
			<image src="/static/loginWx.png"></image>
		</view>
	</view>	
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default{
		components:{
			 uniIcon,
		},
		
		data(){
			return{
				 bottomData:[
					 {
						 text:'短信验证码登录',
						 name:'message',
						 logurl:'/pages/login/yzm'
					 },
					 {
						 text:'密码登录',
						 name:'psd',
						 logurl:'/pages/login/psdLog'
					 }
				 ],
				 showPass:false,
				 islogYzm:true,//默认手机登录
				 isActive1:false,
				 isActive2:false,
				 inputValue:'',
				 countdown:'获取验证码',
				 timeStatus:false, //s秒
				 disabled:false //重新获取按钮是否开启
			}
		},
		computed:{
			rootHeight(){
				return global.winHeight
			}
		},
		methods:{
			focusClass1(e){
				if(e.detail.value.length !== 0){
					this.isActive1 = true
				}else{
					this.isActive1 = false;
				}
				this.inputValue = e.target.value
			},
			//密码/验证码登录切换
			switchLog(){
					this.islogYzm = !this.islogYzm
			},
			//显示密码
			showPassword(){
				this.showPass = !this.showPass
			},
			//跳到忘记密码页面
			forPsd(){
				uni.navigateTo({
					url:'/pages/login/forInputId'
				})
			},
			//注册账号
			regId(){
				uni.navigateTo({
					url:'/pages/login/registeCon'
				})
			},
			// 遇到问题
			ask(){
				uni.navigateTo({
					url:'/pages/login/askCon'
				})
			},
			// 验证码
			TimeBtn(){
				this.countdown = 60;
				
				this.timeStatus = true;
				let timer = setInterval(()=>{
					--this.countdown
				},1000)
				setTimeout(()=>{
					clearInterval(timer);
					this.timeStatus = false;
					this.countdown = '重新获取';
				},60000);
				if(this.countdown == '重新获取'){
					this.disabled = false
				}else{
					this.disabled = true
				}
				console.log(typeof(this.countdown));
			},
			// 验证码vuex
			TimeBtn2(){
				if(this.timeStatus==false){
					this.timeStatus = true;
					this.countdown = this.msgTimer 
				}
				
			},
			// 登录
			goIndex(){
				// this.type = type
				// let isPhone =/^[1][3,4,5,6,7,8,9][0-9]{9}/;
				// if(isPhone.test(this.inputValue)){
					uni.switchTab({
						url:'/pages/home/home'
					})
				// 	console.log(this.inputValue);
				// }else{
				// 	uni.showToast({
				// 		title:'输入有误，请从新输入',
				// 		icon:'none'
				// 	})
				// 	console.log('输入有误，请从新输入');
				// }
				
			},
		},
		computed: {
			msgTimer() {
				return this.$store.state.msgTime.time
			}
		},
		
	}
</script>

<style>
	.rootLog{
		padding-top:60upx;
	}
	.dlBoxIco{
		width:120upx;
		height:120upx;
		border-radius: 20upx;
		margin:0 auto;
		/* background:linear-gradient(top,#5691FF,#54A6FF) ; */
	}
	.dlBoxIco image{
		width:120upx;
		height:120upx;
	}
	.dlWrap{
		margin:100upx 56upx 0 56upx;
	}
	.logTypeBotm{
		width: 100%;
		position: absolute;
		bottom:42upx;
		left:-50%;
		margin-left: 50%;
		display: flex;
		justify-content: center;
	}
	.logTypeBotm image{
		width:58upx;
		height: 58upx;
		margin-left:72upx;
	}
	.logTypeBotm image:first-child{
		margin-left: 0;
	}
	
	.changeLoginType{
		margin-top:56upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.changeLoginType text{
		color: #549BFF;
		font-size:24upx;
		padding: 20upx 10upx;
		padding-right: 0;
	}
	.loginMethod{
		margin-top: 28upx;
		color: #999;
		font-size: 24upx;
		text-align: center;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.loginMethod .line{
		font-weight: 500;
		margin:0 10upx;
	}
	.loginMethod text{
		padding:10upx;
	}
	.dlInput_numb{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.dlInput_psd{
		margin-top: 76upx;
		padding-bottom:20upx;
		height:46upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1upx solid #DCDCDC;
		justify-content: space-between;
	}
	.dlInput_psd text{
		color: #333333;
		font-size: 28upx;
	}
	.dlInput_psd input{
		margin-left:70upx;
		height:46upx;
		line-height:46upx;
		color: #333;
		font-size: 28upx;
	}
	/* .blueBorder{
		border-bottom: 1upx solid #55A0FF!important;
	} */
	.goIndex{
		height: 88upx;
		line-height: 88upx;
		border-radius:88upx;
		font-size: 28upx;
		background: linear-gradient(left,#54AAFF,#568FFF);
		text-align: center;
		color: #ffffff;
		margin-top:110upx;
	}
	.smallBtn{
		color: #559EFF;
		font-size: 24upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 66upx;
	}
	.forPsd{
		padding:10upx;
		padding-left:0;
	}
	.goReg{
		color: #999999;
		}
	.goReg text{
		color: #559EFF;
		padding:10upx;
	}
	.goReg text:last-child{
		padding-right:0;
	}
	.getYzm{
		width:190upx;
		height: 63upx;
		line-height: 63upx;
		background: #559DFF;
		border-radius: 10upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 24upx;
	}
	/* 验证码登录样式 */
	.yzmLog{
	margin-top: 76upx;
	height:46upx;
	}
	.yzmLog > view{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.yzmLog input{
		height:46upx;
		line-height:46upx;
		color: #333;
		width:428upx;
		font-size: 28upx;
		padding-bottom:20upx;
		border-bottom: 1upx solid #DCDCDC;
	}
</style>
